<template>
  <div id="cartoon-list">
    <div class="header-box coll">
      <div class="form-flex">
        <div class="form-item">
          <span class="label">分类名称</span>
          <el-input
            size="default"
            v-model.trim="queryInfo.name"
            style="width: 130px; margin-right: 10px"
            clearable
            placeholder="请输入搜索的内容"
          ></el-input>
        </div>
        <div class="form-item">
          <el-button type="primary" size="default" @click="getProductList">查询</el-button>
          <el-button type="primary" size="default" @click="onShow(1)">添加</el-button>
        </div>
      </div>
    </div>
    <div class="table-box coll">
      <l-tabel :data="data.tableData" :columns="data.columns" :height="data.tableHeight">
        <template #createTime="{ scope }">
          <span>{{ scope.row.create_time || '-' }}</span>
        </template>
        <template #status="{ scope }">
          <span>{{ statusType[scope.row.status] }}</span>
        </template>
        <template #operation="{ scope }">
          <el-button size="small" type="primary" :icon="Edit" @click="onShow(2, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" :icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </l-tabel>
      <!-- <div class="pagination">
        <el-pagination
          v-model:currentPage="queryInfo.page"
          v-model:page-size="queryInfo.pageSize"
          :page-sizes="[20, 50, 100, 200]"
          background
          layout="slot, prev, pager, next"
          :total="data.total"
        >
          <span style="margin-right: 5px">当前共{{ data.total }}条</span>
        </el-pagination>
      </div> -->
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="data.dialogType == 1 ? '添加' : '修改'"
      width="20%"
      @close="categoryClose"
    >
      <div class="add-content">
        <div class="form-item">
          <div class="label">分类名称：</div>
          <div class="cartoon-name">
            <el-input v-model="categotyItem.name" placeholder="请输入分类名称" />
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="categoryClose()">取消</el-button>
          <el-button type="primary" @click="addCartoon(data.dialogType)">{{
            data.dialogType == 1 ? '保存' : '修改'
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import { statusType, dialogFormVisible, categotyItem, queryInfo } from './ts/data'
import { CartoonCategory } from '@/service/cartoonCategory'
import { getTableHeight } from '@/hooks/utils'
import LTabel from '@/components/tabel.vue'

const data = reactive({
  disabled: false,
  tableHeight: 0,
  tableData: [],
  total: 0,
  dialogVisible: false,
  dialogTitle: '',
  dialogType: 1,
  columns: [
    { attar: { label: '分类名称', prop: 'name' } },
    { slot: 'createTime', attar: { label: '创建时间', prop: 'create_time' } },
    { slot: 'status', attar: { label: '状态', prop: 'status' } },
    { slot: 'operation', attar: { label: '操作', prop: 'operation', width: '280' } }
  ]
})
// @ts-ignore
const { proxy } = getCurrentInstance()
const api = proxy.$api
const cartoon = new CartoonCategory(api)

onMounted(() => {
  data.tableHeight = getTableHeight(180)
  getProductList()
})

// 获取分类列表
const getProductList = async () => {
  const res = await cartoon.getProductList(queryInfo, 'getNovelCategoty')
  if (res.code == 200) {
    data.tableData = res?.data?.data
    data.total = res?.data?.total
  }
}
// 添加分类
const addCartoon = async (type: any) => {
  let res = null
  if (type == 1) {
    res = await cartoon.addCartoon(categotyItem, 'addNovelCategory')
  } else {
    res = await cartoon.editCartoon(categotyItem, 'editCategotyNovel')
  }
  if (res.code == 200) {
    getProductList()
    categoryClose()
  }
}
// 删除
const deleteItem = async (id: Number) => {
  const { code } = await cartoon.deleteItem(id, 'deleteCategoryNovel')
  if (code == 200) {
    getProductList()
  }
}
function onShow(type: any, item: any) {
  if (type == 2) {
    categotyItem.name = item.name
    categotyItem.id = item.id
    categotyItem.parent_id = item.parent_id
  }
  data.dialogType = type
  dialogFormVisible.value = true
}
// 获取表格的高度
// const getTableHeight = async () => {
//   // console.log(document.getElementById('cartoon-list'),'==>')
//   const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
//   // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
//   data.tableHeight = windowHeight - 170
// }
const categoryClose = () => {
  dialogFormVisible.value = false
  categotyItem.name = ''
}
</script>

<style scoped lang="less" src="./css/cartoon-list.less">
</style>
